<template>
	<!-- 管理报名通告 -->
	<view>
		<!-- <uni-notice-bar color="#000" background-color="#fffbd7" single :text="NoticeMemo" v-if="isType == 0 " /> -->

		<scroll-view scroll-y @scrolltolower="onPullUpLoading()" :style="{ height: height + 'px' }">
			<view style="height: 100vh;display: flex;justify-content: center;align-items: center;"
				v-if="SignUpList.length == 0">
				暂无数据
			</view>
			<view v-else>
				<view style="padding: 20rpx;margin: 20rpx;background-color: #fff;border-radius: 5rpx;"
					v-for="(item,index) in SignUpList" :key="index">
					<view class="" @click="onNavDetail(`/notice/details?NoticeID=${item.NoticeID}` )">
						<view class="flexbc">
							<view class="noticeTitle">
								<text v-if="item.Roles">招募 {{ JSON.parse(item.Roles).text }}</text>
								<text style="margin-left:0rpx">・</text>
								<text v-if="item.PriceType && JSON.parse(item.PriceType).value === 1">
									<text>¥</text>
									<text v-if="item.PriceQujian === 0">{{ item.Price | formatPrice }}</text>
									<text v-else>{{ item.StartPrice | formatPrice }} ~
										{{ item.EndPrice | formatPrice }}</text>
									<text v-if="item.Unit">{{ JSON.parse(item.Unit).result }}</text>
								</text>
								<text v-else>{{ JSON.parse(item.PriceType).result }}</text>
							</view>
							<view style="display: flex; align-items: center;">
								<fui-icon name="location" :size="28"></fui-icon>
								<text class="onCity">{{ item.City?item.City:'全国' }}</text>
							</view>
						</view>

						<view class="flexbc" style="padding-bottom:20rpx;">
							<view class="leftTexts">
								<view class="noticeMemo">{{item.NoticeMemo}}</view>
								<view class="userlabel">
									<view>{{ item.ClassName }}</view>
									<view v-if="item.SexLimit">性别要求：{{ JSON.parse(item.SexLimit).text }}</view>
								</view>
							</view>
						</view>
					</view>

					<view
						style="display: flex; flex-direction: row; justify-content: space-between; align-items: center;border-top: 1rpx solid #eeeeee;padding-top: 20rpx;">
						<view
							style="display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
							<image @click="ToDetails(item)" :src="item.SignupWxHeadPic"
								style="width: 80rpx;height: 80rpx;border-radius: 50%;" mode="widthFix"></image>
							<view style="margin-left: 20rpx;">
								<view style="font-size: 26rpx;">
									<text>{{ item.SignupNickName }}</text>
								</view>
								<view style="font-size: 22rpx; color: #cfcfcf;margin-top: 10rpx;">
									<!-- 其他 · 模特 · 舞者Dancer -->
									<text v-for="(itm, idx) in item.UserRoles" :key="idx">
										<text> {{ itm.LabelName }} </text>
										<text v-if="idx != (item.UserRoles.length - 1)"
											style="padding: 0 10rpx;">·</text>
									</text>
								</view>
							</view>
						</view>
						<view class="">
							<view style="text-align: right;font-size:26rpx;color: #54d5ff;"
								@click.stop="onNavDetail(`/myPages/pages/signUpNoticeDetail?NoticeID=${item.NoticeID}&SignupUserID=${item.SignupUserID}` )">
								联系TA
							</view>
							<view style="font-size: 22rpx; margin-top: 10rpx; color: #cfcfcf;">
								{{ $common.timeDiff(item.addTime,new Date()) }}
							</view>
						</view>

					</view>

					<!-- <view style="margin-top: 20rpx;font-size: 24rpx;display:flex;justify-content: flex-start;flex-direction: row;align-items: center;">
						<view class="" style="flex: 1;color: #cfcfcf;">
							手机号：
						</view>
						<view class="" style="flex: 1;text-align: left;">
							{{ item.UserMobile ? item.UserMobile : '无' }}
						</view>
						<view class="" style="color:#68cee7;flex: 1;text-align:right;" @click.stop="onCopy(item.UserMobile,'手机号')">
							复制
						</view>
						
					</view>
					<view style="margin-top: 10rpx;font-size: 24rpx;display:flex;justify-content: flex-start;flex-direction: row;align-items: center;">
						<view class="" style="flex: 1;color: #cfcfcf;">
							微信号：
						</view>
						<view class="" style="flex: 1;text-align: left;">
							{{ item.WeixinCode ? item.WeixinCode : '无' }}
						</view>
						<view class="" style="color:#68cee7;flex: 1;text-align:right;"  @click.stop="onCopy(item.WeixinCode,'微信号')">
							复制
						</view>
					</view>
					<view style="margin-top: 10rpx;font-size: 24rpx;display:flex;justify-content: flex-start;flex-direction: row;align-items: center;">
						<view class="" style="flex: 1;color: #cfcfcf;">
							QQ：
						</view>
						<view class="" style="flex: 1;text-align: left;">
							{{ item.QQCode ? item.QQCode : '无' }}
						</view>
						<view class="" style="color:#68cee7;flex: 1;text-align:right;"  @click.stop="onCopy(item.QQCode,'QQ号')">
							复制
						</view>
					</view> -->
					<view
						style="margin-top: 10rpx;font-size: 24rpx;display:flex;justify-content: flex-start;flex-direction: row;align-items: flex-start;">
						<view class="" style="flex: 1;color: #cfcfcf;">
							报名理由：
						</view>
						<view class="" style="flex: 2;text-align: right;word-wrap: break-word;word-break: break-all;">
							{{ item.SignupMemo }}
						</view>
					</view>
				</view>
				<uni-load-more :status="more"></uni-load-more>
			</view>

		</scroll-view>

	</view>
</template>

<script>
	export default {
		filters: {
			formatPrice(price) {
				if (price > 10000) {
					return price / 10000 + 'w';
				} else if (price > 1000) {
					return price / 1000 + 'k'
				} else {
					return parseInt(price, 10);
				}
			}
		},
		data() {
			return {
				SignUpList: [],
				NoticeID: 0,
				isType: 0,
				page: 1,
				height: 0,
				more: 'more',
				// 通告
				NoticeMemo: '',
			}
		},
		onLoad(options) {
			// console.log('options', options)
			this.NoticeID = options.NoticeID ? options.NoticeID : 0;
			this.getNoticeList()
		},
		onShow() {
			this.height = uni.getSystemInfoSync().windowHeight - uni.upx2px(100);
		},
		methods: {
			ToDetails(item) {
				console.log(item, '222222');
				this.$common.goNavPage('/artistesPages/pages/artister?artisterID=' + item.SignupUserID);
			},
			onCopy(data, text) {
				uni.setClipboardData({
					data,
					showToast: false,
					success: res => {
						uni.showToast({
							title: `复制${text}成功`,
							icon: 'success'
						})
					}
				})
			},
			onPullUpLoading() {
				this.page += 1;
				this.getNoticeList();
			},
			onNavDetail(url) {
				uni.navigateTo({
					url
				})
			},
			// 打电话
			onContactHe(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			// 获取通告列表
			getNoticeList() {
				this.more = 'loading';
				this.$httpost('/Notices/NoticesSignUpList', {
					NoticeID: this.NoticeID,
					page: this.page
				}).then(res => {
					if (res.code == 200) {
						if (this.SignUpList.length != 0) {
							this.SignUpList = [...this.SignUpList, ...res.data];
							if (res.data.length == 0) this.more = 'onMore'
						} else {
							this.SignUpList = res.data;
							this.more = 'more'
						}
					}
				})
			},
		},

	}
</script>

<style lang="scss">
	.noticeTitle {
		font-size: 32rpx;
		color: #333;
		font-weight: bold
	}

	.onCity {
		color: #999;
		margin-left: 10rpx;
		padding-bottom: 5rpx;
		font-size: 24rpx
	}

	.noticeMemo {
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #999;
	}

	.userlabel {
		display: flex;
		margin-top: 20rpx;
		/* justify-content:center; */
	}

	.userlabel view {
		background-color: #e0e0e0;
		color: #666;
		font-size: 18rpx;
		margin-right: 10rpx;
		border-radius: 4rpx;
		padding: 6rpx 10rpx 6rpx 10rpx;
	}
</style>